<template>
    <div id="easyplayer" class="video-player-container"></div>
</template>

<script>
export default {
    name: 'player',
    data() {
        return {
            easyPlayer: null,
            duration: 0,
            currentSpeed: 1.0,
            speedOptions: [0.5, 0.75, 1.0, 1.25, 1.5, 2.0], //倍速选项
            isSpeedMenuOpen: false,
        };
    },
    props: ['videoUrl', 'error', 'hasaudio', 'height'],
    mounted() {
        let paramUrl = decodeURIComponent(this.$route.params.url);
        this.$nextTick(() => {
            if (typeof this.videoUrl == 'undefined') {
                this.videoUrl = paramUrl;
            }
            console.log('初始化时的地址为: ' + this.videoUrl);
            this.play(this.videoUrl);
            // this.init();
        });
    },
    computed: {
        formattedCurrentTime() {
            return this.formatTime(this.currentTime);
        },
        formattedDuration() {
            return this.formatTime(this.duration);
        },
    },
    watch: {
        videoUrl(newData, oldData) {
            this.play(newData);
            // this.init();
        },
        immediate: true,
    },
    methods: {
        init() {
            const parent = document.querySelector('.video-player-container');
            if (parent) {
                const target = parent.querySelector('div:nth-child(4)');
                if (target) {
                    target.classList.add('speed-dropdown');

                    // 创建倍速控制下拉框
                    const speedDropdown = document.createElement('div');
                    speedDropdown.className = 'speed-dropdown relative inline-block';

                    // 创建下拉按钮
                    const button = document.createElement('button');
                    button.className = 'control-button speed-button bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm flex items-center transition-all duration-200';
                    button.style.margin = '0 30px';
                    button.innerHTML = `
            <span>${this.currentSpeed}x</span>
            <i class="fa fa-caret-down ml-1"></i>
          `;

                    // 添加按钮点击事件
                    button.addEventListener('click', (e) => {
                        e.stopPropagation();
                        this.toggleSpeedMenu();
                    });

                    // 创建下拉菜单
                    const menu = document.createElement('div');
                    menu.className = 'speed-menu absolute right-0 mt-1 w-24 bg-gray-800 rounded shadow-lg z-10 transform transition-all duration-200 opacity-0 scale-95 pointer-events-none';
                    menu.style.display = 'none';
                    menu.style.margin = '0 30px';

                    // 为每个速度选项创建菜单项
                    this.speedOptions.forEach((speed) => {
                        const option = document.createElement('div');
                        option.className = `px-3 py-1 hover:bg-gray-700 cursor-pointer transition-colors duration-150 ${speed === this.currentSpeed ? 'font-bold text-white' : 'text-gray-300'}`;
                        option.textContent = `${speed}x`;

                        // 添加选项点击事件
                        option.addEventListener('click', () => {
                            this.setPlaybackRate(speed);
                            button.querySelector('span').textContent = `${speed}x`;

                            // 更新菜单项样式
                            Array.from(menu.children).forEach((child) => {
                                if (parseFloat(child.textContent) === speed) {
                                    child.className = 'px-3 py-1 hover:bg-gray-700 cursor-pointer transition-colors duration-150 font-bold text-white';
                                } else {
                                    child.className = 'px-3 py-1 hover:bg-gray-700 cursor-pointer transition-colors duration-150 text-gray-300';
                                }
                            });
                        });

                        menu.appendChild(option);
                    });

                    // 添加菜单显示/隐藏逻辑
                    this.$watch('isSpeedMenuOpen', (newVal) => {
                        if (newVal) {
                            menu.style.display = 'block';
                            // 添加动画效果
                            setTimeout(() => {
                                menu.style.opacity = '1';
                                menu.style.scale = '1';
                                menu.style.pointerEvents = 'auto';
                            }, 10);
                        } else {
                            menu.style.opacity = '0';
                            menu.style.scale = '0.95';
                            menu.style.pointerEvents = 'none';
                            setTimeout(() => {
                                menu.style.display = 'none';
                            }, 200);
                        }
                    });

                    // 点击页面其他地方关闭菜单
                    document.addEventListener('click', () => {
                        if (this.isSpeedMenuOpen) {
                            this.isSpeedMenuOpen = false;
                        }
                    });

                    // 防止点击下拉框内部关闭菜单
                    speedDropdown.addEventListener('click', (e) => {
                        e.stopPropagation();
                    });

                    // 组装下拉框
                    speedDropdown.appendChild(button);
                    speedDropdown.appendChild(menu);
                    target.appendChild(speedDropdown);

                    // 添加样式
                    this.addStyles();
                }
            }
        },
        addStyles() {
            // 添加倍速控制样式
            if (!document.querySelector('.speed-dropdown-styles')) {
                const style = document.createElement('style');
                style.textContent = `
          .control-button {
            outline: none;
          }
          .speed-button:hover {
            background-color: #4a5568;
          }
          .speed-menu {
            transform-origin: top right;
          }
          .speed-menu div {
            white-space: nowrap;
          }
        `;
                style.classList.add('speed-dropdown-styles');
                document.head.appendChild(style);
            }
        },
        play: function (url) {
            if (this.easyPlayer != null) {
                this.easyPlayer.destroy();
            }
            // this.init();
            if (typeof this.height == 'undefined') {
                this.height = false;
            }
            this.easyPlayer = new WasmPlayer(null, 'easyplayer', this.eventcallbacK, { cbUserPtr: this, decodeType: 'auto', openAudio: 1, BigPlay: false, Height: this.height });
            this.easyPlayer.play(url, 1);
        },
        pause: function () {
            this.easyPlayer.destroy();
            this.easyPlayer = null;
        },

        toggleSpeedMenu() {
            this.isSpeedMenuOpen = !this.isSpeedMenuOpen;
        },
    },
    destroyed() {
        this.easyPlayer.destroy();
    },
};
</script>

<style>
.LodingTitle {
    min-width: 70px;
}
/* 隐藏logo */
.iconqingxiLOGO {
    display: none !important;
}
/* .timeTrack {
    display: none !important;
} */
/* 播放器容器 */
.video-player-container {
    position: relative;
    background-color: #000;
}

/* 自定义控制栏 */
.custom-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    padding: 10px;
    display: flex;
    align-items: center;
    transition: opacity 0.3s;
    opacity: 0;
    z-index: 10;
}

.video-player-container:hover .custom-controls {
    opacity: 1;
}

/* 控制按钮 */
.control-button {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    width: 22px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.control-button:hover {
    opacity: 1;
}

/* 倍速选择 */
.speed-dropdown {
    position: relative;
    margin-right: 10px;
}

.speed-button {
    font-size: 16px;
    min-width: 35px;
    justify-content: space-between;
}

.speed-menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    padding: 5px 0;
    width: 60px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    display: none;
}

.speed-menu div {
    color: white;
    font-size: 13px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.speed-menu div:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.speed-menu div.active {
    color: #ff0000;
    font-weight: 500;
}

.speed-dropdown:hover .speed-menu,
.speed-menu:hover {
    display: block;
}
</style>
